<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

<dom-module id="view-offline">
  <template>
    <style>
       :host {
        display: block;
        overflow: hidden;
      }

      iron-icon {
        width: 50px;
        height: 50px;
      }

      h1,
      p {
        margin: 16px 0;
        font-weight: 400;
        color: var(--app-font-color);
      }

      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        text-align: center;
        flex-direction: column;
        height: 100vh;
      }

      .flex-group {
        margin: auto;
      }

      .icon {
        fill: var(--app-font-color);
      }

      @media (min-width: 360px) and (max-width: 768px) {
        h1 {
          font-size: 1.4rem;
          margin: 12px 0;
        }
      }
    </style>
    <div class="container">
      <div class="flex-group">
        <iron-icon class="icon" icon="icons:perm-scan-wifi"></iron-icon>
        <h1>No internet connection</h1>
        <p>Check if your device is connected to a mobile network or WiFi.</p>
        <paper-button on-click="tryReconnect">Try Again</paper-button>
      </div>
    </div>
  </template>
  <script>
    /**
     * @ViewOffline
     * @polymer 
     * @extends {Polymer.Element}
     */
    class ViewOffline extends Polymer.Element {
      static get is() {
        return 'view-offline'
      }

      static get properties() {
        return {
          route: Object
        }
      }

      tryReconnect() {
        this.dispatchEvent(new CustomEvent('try-reconnect', {
          composed: true
        }))
      }
    }
    window.customElements.define(ViewOffline.is, ViewOffline)
  </script>
</dom-module>